Style find-your-cruise columns block as HAL promo banner#6
Merged
Conversation
Add a find-your-cruise section variant that renders the columns block on /en/us as the "Around the World" promotional banner from hollandamerica.com/en/us: full-bleed navy section with a centered serif heading, image-left / light-panel-right banner, navy copy, and an orange pill CTA. Responsive (stacks on mobile) and scoped to the section so other columns blocks are unaffected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
aem-edge-functions is a self-contained Fastly Compute subproject with its own package.json, lockfile, and test runner. The root airbnb-base/browser eslint config is inappropriate for its server-side ESM code (fastly:* imports, addEventListener, mocha globals), which broke `npm run lint` and the build check for the whole repo. Ignore it here, mirroring the existing helix-importer-ui exclusion; it can be linted by its own toolchain. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Applied object-fit:cover with height:100% unconditionally, but on mobile the column has no definite height so the image couldn't reserve its aspect ratio, causing layout shift (PSI mobile CLS 0.238). Keep the natural aspect ratio on mobile and only fill/crop at >=900px, where the row has a fixed min-height. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Styles the
columnsblock in the Find Your Cruise Vacation section on/en/usto match the "Around the World in 11 Ways" promotional banner on hollandamerica.com/en/us, leveraging the existingfind-your-cruisesection metadata (Style: find-your-cruise).Test URLs
Compare the "Find Your Cruise Vacation" section (directly below the hero):
(Live equivalents: before · after)
Changes
styles/styles.css— new.section.find-your-cruisevariant: full-bleed navy background (--brand-navy) with a centered white serif (--display-font-family) heading. Mirrors the existing.section.darkpattern.blocks/columns/columns.css—.find-your-cruise .columnsrenders as a horizontal banner: image on one side (subtle navy tint), a light content panel on the other with navy heading/body copy and an orange pill CTA. Stacks image-over-panel below 900px.Notes
.find-your-cruise, so othercolumnsblocks (e.g. the "Give $50, Get $50" block on the same page) are unaffected.decorateButtonsonly buttonizes bold/italic links, so the pill is applied via CSS toa:not(.button)— works with the current content and stays compatible if the link is later authored as a.button.accent.build(lint) check is failing on pre-existing errors inaem-edge-functions/(red onmainsince PR Set up edge functions baseline #4); none involve the files in this PR. Theaem-psi-checkmobile run hit a transient Lighthouse timeout (desktop scored 94 / LCP 0.3s / TBT 0).🤖 Generated with Claude Code